<template>
    <div class='shouye'>
        <header class="header">
            <h1 class="logo">
                <img src="../../assets/images/h5_navlogo.png">
            </h1>
            <router-link to="/search"><div class="sou"><img src="../../assets/images/1.png" alt=""></div></router-link>
        </header>
         <div class='down'></div>
        <div>
            <mt-swipe :auto="4000">
            <mt-swipe-item><img src="../../assets/images/5efa96a0eeaed-750x500.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/5efa9685e6636-750x500.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/5efa965c269d1-750x500.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/5efa9633c27b0-750x500.jpg"></mt-swipe-item>
            <mt-swipe-item><img src="../../assets/images/5efa95c148edf-750x500.jpg"></mt-swipe-item>
            </mt-swipe>   
        </div>
        <div class="nav">
            <a><img src="../../assets/images/pic_index_gx.png"></a>
            <a><img src="../../assets/images/pic_index_ph.png"></a>
            <a><img src="../../assets/images/pic_index_xs.png"></a>
        </div>
        <div class='all'>
            <div class='title'>
                <div class='title-left'>
                    <i class='icon i-hm-jp '></i>
                    <span>客栈精品</span>
                </div>
                <div class='title-right'>
                    <router-link to="/list"><p>更多 ></p></router-link>
                </div>
            </div>
            <div class="comic-item-jp">
                    <div class="column">
                        <span class="item">
                            <img src="../../assets/images/5c9dd7bc36c89-568x320.jpg">
                            <p>1111</p>
                            <p>2222</p>
                        </span>
                        <span class="item">
                            <img src="../../assets/images/5abdb5adaac23-640x359.jpg">
                            <p>1111</p>
                            <p>2222</p>
                        </span>
                    </div>
                    
                    <div class="column">
                        <span class="item">
                            <img src="../../assets/images/5e229da3a0e66-762x429.jpg">
                            <p>1111</p>
                            <p>2222</p>
                        </span>
                        <span class="item">
                            <img src="../../assets/images/5bc93f4158a96-711x400.jpg">
                            <p>1111</p>
                            <p>2222</p>
                        </span>
                    </div>
            </div>
        </div>          
        <div class="all">
            <div class='title'>
                <div class='title-left'>
                    <i class='icon i-hm-du'></i>
                    <span>独家作品</span>
                </div>
                <div class='title-right'>
                    <p>更多 ></p>
                </div>
            </div>
            <div>
                <img src="../../assets/images/5d9d76f1030cd-750x422.jpg" alt="">
                <p>花千骨</p>
                <p>刻苦铭心</p>
            </div>
            <div class="comic-item-jp">
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5e182f3a506f3-743x991.jpg" alt="">
                        <p>风起苍岚</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/86080.jpg">
                        <p>斗罗大陆</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5ed70061105c7-750x999.jpg" alt="">
                        <p>黑子</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5b7f71452cb89-600x800.jpg" alt="">
                        <p>完美世界</p>
                        <p>成长</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5d1d741e7b2eb-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
            </div> 
            <img src="../../assets/images/5d9d764920f14-750x280.jpg" alt="">
        </div>
        <div class="all">
            <div class='title'>
                <div class='title-left'>
                    <i class='icon i-hm-du'></i>
                    <span>排行榜</span>
                </div>
                <div class='title-right'>
                    <p>更多 ></p>
                </div>
            </div>
            <div class="comic-item-jp">
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
            </div>
        </div>
        <div class="all">
            <div class='title'>
                <div class='title-left'>
                    <i class='icon i-hm-du'></i>
                    <span>新作尝新</span>
                </div>
                <div class='title-right'>
                    <p>更多 ></p>
                </div>
            </div>
            <div>
                <img src="../../assets/images/5d9d748466585-750x422.jpg">
                <p>刺魂</p>
                <p>刻苦铭心</p>
            </div>
            <div class="comic-item-jp">
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5eec2177b57f3-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
            </div> 
            <img src="../../assets/images/5d9d765e9b589-750x280.jpg" alt="">
        </div>
        <div class="all">
            <div class='title'>
                <div class='title-left'>
                    <i class='icon i-hm-du'></i>
                    <span>和做作品</span>
                </div>
                <div class='title-right'>
                    <p>更多 ></p>
                </div>
            </div>
            <div>
                <img src="../../assets/images/5d9d748df2430-750x422.jpg" alt="">
                <p>花千骨</p>
                <p>刻苦铭心</p>
            </div>
            <div class="comic-item-jp">
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5e182f3a506f3-743x991.jpg" alt="">
                        <p>风起苍岚</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/86080.jpg">
                        <p>斗罗大陆</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5ed70061105c7-750x999.jpg" alt="">
                        <p>黑子</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
                <div class="column">
                    <span class="item">
                        <img src="../../assets/images/5b7f71452cb89-600x800.jpg" alt="">
                        <p>完美世界</p>
                        <p>成长</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5d1d741e7b2eb-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                    <span class="item">
                        <img src="../../assets/images/5c0a418624f8d-750x999.jpg" alt="">
                        <p>花千骨</p>
                        <p>刻苦铭心</p>
                    </span>
                </div>
            </div> 
            <img src="../../assets/images/5d9d767f70261-750x280.jpg" alt="">
        </div>
        <div class='all'>
            <div class='title'>
                <div class='title-left'>
                    <i class='icon i-hm-jp '></i>
                    <span>客栈精品</span>
                </div>
                <div class='title-right'>
                    <p>更多 ></p>
                </div>
            </div>
            <div class="comic-item-jp">
                    <div class="column">
                        <span class="item">
                            <img src="../../assets/images/5c9dd7bc36c89-568x320.jpg">
                            <p>1111</p>
                           
                        </span>
                        <span class="item">
                            <img src="../../assets/images/5abdb5adaac23-640x359.jpg">
                            <p>1111</p>
                           
                        </span>
                    </div>
                    
                    <div class="column">
                        <span class="item">
                            <img src="../../assets/images/5e229da3a0e66-762x429.jpg">
                            <p>1111</p>
                            
                        </span>
                        <span class="item">
                            <img src="../../assets/images/5bc93f4158a96-711x400.jpg">
                            <p>1111</p>
                        </span>
                    </div>
            </div>
            <div class="box">
                <div class="box-a">
                    <a href="" class="pc">电脑</a>
                    <a href="" class="pc">意见反馈</a>
                </div>
                <span class="char-img"></span>
            </div>
        </div>
        <div class='down'></div>
        <div class="footer-app">
            <img src="../../assets/images/pic_download_app.png" alt="">

        </div>
    </div>
</template>
 <style>
 *{margin:0;padding:0}
 img{
     width: 100%;
 }
.shouye .sou{
    float:right;
     width: 1.50667rem;
    height: .48667rem;
     margin-top: .63333rem;
     margin-right: 0.8rem;
}
.shouye .sou img{
    width: 100%;
}
li{list-style:none}
 .header {
    position: fixed;
    top: 0;
    width: 100%;
    padding-bottom:7.28%;
    border-bottom: 1px solid #ebebeb;
    text-align: center;
    line-height: 1.17333rem;
    background: #fff;
    z-index: 99;
}
.header .logo {
    width: 4.90667rem;
    height: .48667rem;
    float: left;
    margin-top: .13333rem;
    margin-left: .32rem;
    font-size: 0;
}
.header h1 {
    margin: 0;
    font-weight: normal;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
.header .logo img {
    width: 100%;
}
.shouye .mint-swipe-items-wrap{
   padding-bottom:67.28%;
}
.shouye .mint-swipe-items-wrap img{
    width:100%;
}
.shouye .nav{
    display: flex;
    padding: 1.32rem 1.46667rem 1.64rem;
    justify-content:space-between;
}
.shouye .nav a{
 flex-direction:column; 
    width: 5.4rem;
    position: relative;  
}
.shouye .nav a img{
    width:100%;
    height:100%
}

.shouye .title{
    width: 100%;
    padding-bottom:7.28%;
}
.shouye .title-left{
   float:left;
}
.shouye .title-left span{
    float:left;
}
.shouye .title-left .icon {
    float: left;
    width: 3.53333rem;
    height: 1.53333rem;
    margin-top: -.150667rem;
    margin-right: -.8rem;
}
.shouye .title-left .i-hm-jp {
    background: url(../../assets/images/ic_home_jp.png) no-repeat center center;
    background-size: contain;
}
.shouye .title-right{
   float:right;
}
.shouye .comic-item-jp .comic-item-du{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
}

.shouye .comic-item-jp img{
    width:95%;
}
.shouye .column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-around;
}
.shouye .all {
     padding-right: 0.32rem;
    padding-left: 0.32rem;
    padding-bottom: 1.13333rem;
}
.shouye .title-left .i-hm-du{
    background: url(../../assets/images/ic_home_dj.png) no-repeat center center;
    background-size: contain;
}
.shouye .box {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
    padding-bottom: 2.13333rem;
    padding-top: .26667rem;
    position: relative;
}
.shouye .box-a{
  display: flex;
  justify-content:  space-around;
}
.shouye .box-a .pc{
    width: 4.66667rem;
    height: 1.8rem;
    line-height: 1.8rem;
    margin-right: .53333rem;
    line-height: .8rem;
    text-align: center;
    border-radius: .4rem;
    display: block;
    border: 2px solid #ff7830;
    color: #ff7830;}
    .shouye .down{
        height: 50px;
    }
.shouye .char-img {
    top:2rem ;
    width: 4.06667rem;
    height: 4.4rem;
    background: url(../../assets/images/pic_home_footimg.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: .8rem;} 
    .shouye .footer-app{
        height: 3rem;
        width: 3.5rem;
        position: fixed;
        bottom: 6rem;
        right: 0rem;
    }
 </style>